<script setup lang="ts">
import {onMounted, ref} from "vue";
import useDepartmentStore from "@/store/modules/department.ts";
import useDoctorStore from "@/store/modules/doctor.ts";
import useScheduleStore from "@/store/modules/schedule.ts";
import {getNowTime, getWeekStr} from "@/utils";
import type {CalendarDateType, CalendarInstance} from "element-plus";
const departmentStore = useDepartmentStore();
const doctorStore = useDoctorStore();
const scheduleStore = useScheduleStore();
const departmentId = ref<string>("");
const changeHandler = async function(value:string){
    const time = new Date();
    await scheduleStore.getScheListByDepIdAndDateAsync(value,time.getFullYear(),time.getMonth()+1)
    await doctorStore.getDepartmentDoctorListAsync(value);
}
const calendar = ref<CalendarInstance>();
const dateV = ref<Date>(new Date());
const selectDate = async (val: CalendarDateType) => {
    if (!calendar.value) return
    calendar.value.selectDate(val)
    const time = new Date(dateV.value);
    await scheduleStore.getScheListByDepIdAndDateAsync(departmentId.value,time.getFullYear(),time.getMonth()+1)
}
onMounted(async function(){
    await departmentStore.getDepartmentListAsync();
})
</script>

<template>
    <el-card>
        <el-space>
            <el-cascader clearable v-model="departmentId" :props="{emitPath:false}" @change="changeHandler" :options="departmentStore.cascaderOptions"></el-cascader>
            <el-popover
                v-for="(item) in doctorStore.departmentDoctorList"
                placement="top-start"
                :width="600"
                trigger="hover"
            >
                <template #reference>
                    <el-avatar
                        :size="30"
                        :src="'/yuma/'+item.avatar"
                    />
                </template>
                <template #default>
                    <el-descriptions>
                        <el-descriptions-item :rowspan="3">
                            <el-avatar
                                :size="80"
                                :src="'/yuma/'+item.avatar"
                            />
                        </el-descriptions-item>
                        <el-descriptions-item label="账号">{{item.adminName}}</el-descriptions-item>
                        <el-descriptions-item label="真实姓名">{{item.name}}</el-descriptions-item>
                        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-popover>
        </el-space>



    </el-card>
    <el-card style="margin-top:5px;">
        <el-calendar
            v-model="dateV"
            ref="calendar"
            v-if="departmentId && Object.keys(scheduleStore.scheduleList).length>0"
            style="min-width: 1200px;text-align: center">
            <template #header="{ date }">
                <span>{{ date }}</span>
                <el-button-group>
                    <el-button size="small" @click="selectDate('prev-month')">
                        上个月
                    </el-button>
                    <el-button size="small" @click="selectDate('today')">今天</el-button>
                    <el-button size="small" @click="selectDate('next-month')">
                        下个月
                    </el-button>
                </el-button-group>
            </template>
            <template  #date-cell="{ data }">
                <template v-if="scheduleStore.scheduleList[data.day]">
                    <el-space direction="vertical">
                        <el-text :class="{'is-selected':data.isSelected,'now-selected':data.day===getNowTime()}">{{data.day+" ("+getWeekStr(data.date.getDay())+")"}}</el-text>
                        <el-button v-if="scheduleStore.scheduleList[data.day].doctorNum===0" key="two" type="info" disabled>无值班医生</el-button>
                        <template v-else-if="scheduleStore.scheduleList[data.day].isTimeout">
                            <el-button v-if="scheduleStore.scheduleList[data.day].sourceNum===0" key="five" type="info" disabled>过期，无法排号</el-button>
                            <el-button v-else key="four" type="info">排班详情-（1/1）</el-button>
                        </template>
                        <template v-else>
                            <el-button v-if="scheduleStore.scheduleList[data.day].sourceNum===0" key="three" type="warning">点击排班</el-button>
                            <el-button v-else key="one" type="success">排班详情-（1/1）</el-button>

                        </template>

                    </el-space>

                </template>
                <el-text v-else></el-text>

            </template>
        </el-calendar>
        <el-text v-else>当前无排班信息，您可以先选择科室，然后进行排班的操作</el-text>
    </el-card>

</template>

<style scoped lang="less">
:deep(.el-calendar__body){
    padding:5px;
}
.is-selected{
    color:red;
}
.now-selected{
    color:green;
}
</style>